<template>
  <div class="salary-container">
    <NavInput>
      <template>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="工单编号：">
            <el-input v-model="formInline.taskCode" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="工单状态：">
            <el-select v-model="formInline.status" placeholder="请选择" clearable>
              <el-option v-for="item in wordStatusList" :key="item.statusId" :label="item.statusName" :value="item.statusId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="searchBtn" @click="onSubmit">
              <el-icon class="el-icon-search" /> 查询</el-button>
          </el-form-item>
        </el-form>
      </template>
    </NavInput>
    <DeTable>
      <div class="btnBox">
        <el-button
          style="background:#ff7730;color:#ffffff; width:100px;height:50px;border-radius:5px"
          @click="dialogVisible=true"
        >
          <el-icon class="el-icon-circle-plus-outline createWordIcon" />
          新建
        </el-button>
        <el-button style="background:#fbf4f0;color:#000000;width:100px;height:50px;border-radius:5px;" @click="isShow=true">
          <span>工单配置</span>
        </el-button>
      </div>
      <template>
        <orderTable ref="mainTable" :form-inline="formInline" :is-from-date="isFromDate" @nopeSubmit="nopeSubmit" />
      </template>
    </DeTable>
    <AddWord :dialog-visible="dialogVisible" @closeInsideWord="closeInsideWord" />
    <DialogStyle>
      <el-dialog :visible="isShow" title="工单配置" width="750px" @close="closeFn">
        <div style="margin-left:120px">
          <span>补货警戒线：</span><el-input-number v-model="num" controls-position="right" :min="1" :max="100" style="width:396px" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button style="margin-right:50px" @click="closeFn">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </el-dialog>
    </DialogStyle>
  </div>
</template>
<script>
import { autoConfig, wordStatus } from '@/api'
import orderTable from './components/orderTable.vue'
import AddWord from './components/AddWord.vue'
export default {
  name: 'Business',
  components: {
    orderTable,
    AddWord
  },
  data() {
    return {
      isFromDate: false,
      wordStatusList: [],
      num: 10,
      isShow: false,
      dialogVisible: false,
      formInline: {
        taskCode: '',
        status: ''
      }
    }
  },
  async created() {
    const res = await wordStatus()
    // console.log(res)
    this.wordStatusList = res
  },

  methods: {
    onSubmit() {
      this.$refs.mainTable.formList = {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0,
        totalPage: 0
      }
      this.isFromDate = true
    },
    nopeSubmit() {
      this.isFromDate = false
    },
    closeInsideWord() {
      this.dialogVisible = false
    },
    async submit() {
      await autoConfig({ alertValue: this.num })
      this.closeFn()
    },
    closeFn() {
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.salary-container {
  padding: 100px 30px 30px 30px;
}

.dialog-footer{
  margin-right: 200px;
}

</style>
